<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>artModal demo</title>
    <link rel="stylesheet" href="./demo.css">
    <link rel="stylesheet" href="./highlight/solarized-light.css">
    <script src="./highlight/highlight.pack.js"></script>
    <script type="text/javascript">
        hljs.initHighlightingOnLoad();
    </script>
    <link rel="stylesheet" href="../src/artModal.css">
    <script src="../src/artModal.js"></script>
</head>
<body>
    <div class="page">
        <div class="header">
            artModal <span style="font-size:12px;">v1.0.1</span>
        </div>
        <div class="header_t">
            author:<a target="_blank" href="https://github.com/liyu365">liyu365</a><br/>
            <a target="_blank" class="github" href="https://github.com/liyu365/artModal/">View on Github</a>
        </div>
        <div class="card">
            <h1 class="title">概述：</h1>
            <ol>
                <li>artModal是一个兼容移动端的模态框插件。</li>
                <li>灵感来自BootStrap的modal组件，与其不同的是artModal能够做到：
                    <ul>
                        <li>零依赖其他组件</li>
                        <li>向下兼容到IE6</li>
                        <li>允许多个模态框同时堆叠出现</li>
                    </ul>
                <li>与以往的弹窗插件不同，artModal不需要大量的js配置选项，用户仅需利用html、css就可以充分自由定制模态框的所有外观。</li>
            </ol>
        </div>

        <div class="card">
            <h1 class="title">引入方式：</h1>
            <div style="margin-top:1em;">在页面头部或底部引入：</div>
            <pre><code class="html">&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/artModal.css&quot;&gt;</code></pre>
            <pre><code class="html">&lt;script src=&quot;../src/artModal.js&quot;&gt;&lt;/script&gt;</code></pre>
        </div>

        <div class="card">
            <h1 class="title">基础演示：</h1>
<pre><code class="html">&lt;button data-toggle=&quot;artModal&quot; data-target=&quot;myModal_1&quot;&gt;基础演示&lt;/button&gt;</code></pre>
<pre><code class="html">&lt;div class=&quot;artModal fade&quot; id=&quot;myModal_1&quot;&gt;
    &lt;div class=&quot;artModal-dialog&quot;&gt;
        &lt;div class=&quot;artModal-content&quot;&gt;
            &lt;div class=&quot;custom_style&quot;&gt;
                基础演示&lt;button data-dismiss=&quot;artModal&quot;&gt;关闭&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
            <button data-toggle="artModal" data-target="myModal_1">基础演示</button>
            <div class="tips">
                <span style="color:red;">注意：</span>&lt;div class=&quot;artModal-content&quot;&gt;
                元素中的所有html和css都是交给用户自由定制的，artModal不会对其中的html和css有任何要求。
            </div>
        </div>

        <div class="card">
            <h1 class="title">去除过渡动画：</h1>
<pre><code class="html">&lt;button data-toggle=&quot;artModal&quot; data-target=&quot;myModal_2&quot;&gt;去除过渡动画&lt;/button&gt;</code></pre>
<pre><code class="html">&lt;div class=&quot;artModal&quot; id=&quot;myModal_2&quot;&gt;
    &lt;div class=&quot;artModal-dialog&quot;&gt;
        &lt;div class=&quot;artModal-content&quot;&gt;
            &lt;div class=&quot;custom_style&quot;&gt;
            去除过渡动画&lt;button data-dismiss=&quot;artModal&quot;&gt;关闭&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
            <button data-toggle="artModal" data-target="myModal_2">去除过渡动画</button>
            <div class="tips">和上面的例子相比，仅仅是去掉了.fade这个class。</div>
        </div>

        <div class="card">
            <h1 class="title">模态框中的内容高度超出视口时：</h1>
            <button data-toggle="artModal" data-target="myModal_3">高度超出视口</button>
            <div class="tips">无需做任何其他配置。</div>
        </div>

        <div class="card">
            <h1 class="title">多个模态框同时堆叠出现：</h1>
            <button data-toggle="artModal" data-target="myModal_4">堆叠出现</button>
            <div class="tips">无需做任何其他配置。</div>
        </div>


        <div class="card">
            <h1 class="title">用javascript主动创建一个模态框实例：</h1>
            <div class="tips">可以利用js主动创建一个模态框实例，这样做实例可以接收更多的配置参数。<br/>例如，我们用javascript让"基础演示"中的那个模态框在页面最下方显示，并让它4秒钟后自动关闭</div>
<pre><code class="html">&lt;button id=&quot;btn&quot;&gt;我只是一个普通的button&lt;/button&gt;</code></pre>
<pre><code class="javascript">var timer;
var btn = document.getElementById('btn');
btn.onclick = function () {
    var myModal_1_obj = artModal({  //构建artModal实例
        element: document.getElementById('myModal_1'),
        open: function () {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function () {
                myModal_1_obj.close();  //关闭
            }, 4000);
        },
        close: function () {
            if (timer) {
                clearTimeout(timer);
            }
        },
        position: 'bottom'
    });
    myModal_1_obj.open();  //显示
}
</code></pre>
            <button id="btn">我只是一个普通的button</button>

            <script>
                var timer;
                var btn = document.getElementById('btn');
                btn.onclick = function () {
                    var myModal_1_obj = artModal({  //构建artModal实例
                        element: document.getElementById('myModal_1'),
                        open: function () {
                            if (timer) {
                                clearTimeout(timer);
                            }
                            timer = setTimeout(function () {
                                myModal_1_obj.close();  //关闭
                            }, 4000);
                        },
                        close: function () {
                            if (timer) {
                                clearTimeout(timer);
                            }
                        },
                        position: 'bottom'
                    });
                    myModal_1_obj.open();  //显示
                }
            </script>
            <div class="tips">
                artModal可接收三个参数：
                <ul>
                    <li>element：模态框对应的dom对象，必须。</li>
                    <li>position：模态框在页面中出现的位置，可选值为'top'|'middle'|'bottom'|'距页面顶端的具体数值'，默认值为'middle'。</li>
                    <li>open：模态框显示时执行的回调函数，可选。</li>
                    <li>close：模态框关闭时执行的回调函数，可选。</li>
                </ul>
                artModal实例公开的两个方法：
                <ul>
                    <li>open()：显示模态框。</li>
                    <li>close()：关闭模态框。</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="header_t" style="padding-bottom:40px;">author:<a target="_blank" href="https://github.com/liyu365">liyu365</a></div>

    <div class="artModal fade" id="myModal_1">
        <div class="artModal-dialog">
            <div class="artModal-content">
                <div class="custom_style">
                    基础演示<button data-dismiss="artModal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div class="artModal" id="myModal_2">
        <div class="artModal-dialog">
            <div class="artModal-content">
                <div class="custom_style">
                    去除过渡动画<button data-dismiss="artModal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div class="artModal fade" id="myModal_3">
        <div class="artModal-dialog">
            <div class="artModal-content">
                <div class="custom_style">
                    很长~<button data-dismiss="artModal">关闭</button>
                    <div class="content">content</div>
                    <div class="content">content</div>
                    <div class="content">content</div>
                    <div class="content">content</div>
                    <div class="content">content</div>
                    <div class="content">content</div>
                    <div class="content">content</div>
                </div>
            </div>
        </div>
    </div>

    <div class="artModal fade" id="myModal_4">
        <div class="artModal-dialog">
            <div class="artModal-content">
                <div class="custom_style">
                    多个模态框同时堆叠出现<button data-dismiss="artModal">关闭</button>
                    <div class="content">
                        <button data-toggle="artModal" data-target="myModal_5">再来一个</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="artModal fade" id="myModal_5">
        <div class="artModal-dialog">
            <div class="artModal-content" style="width:200px;">
                <div class="custom_style">
                    <div class="content">
                        叠罗汉<button data-dismiss="artModal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>